<!--
 * @Author: your name
 * @Date: 2020-05-25 14:51:22
 * @LastEditTime: 2020-05-25 15:05:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\06表格\01.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
    <style>
        body{
            max-width: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册于</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王花花</td>
                <td>whh@111.com</td>
                <td>2020-10-09</td>
            </tr>
            <tr>
                <td>倪马</td>
                <td>w22hh@111.com</td>
                <td>2020-11-09</td>
            </tr>
            <tr>
                <td>但测</td>
                <td>whh12@111.com</td>
                <td>2020-10-19</td>
            </tr>
            <tr>
                <td>有一丝</td>
                <td>wh1h@111.com</td>
                <td>2021-10-09</td>
            </tr>
        </tbody>
    </table>
    <!-- 用颜色间隔 -->
    <table class="table table-striped">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册于</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王花花</td>
                <td>whh@111.com</td>
                <td>2020-10-09</td>
            </tr>
            <tr>
                <td>倪马</td>
                <td>w22hh@111.com</td>
                <td>2020-11-09</td>
            </tr>
            <tr>
                <td>但测</td>
                <td>whh12@111.com</td>
                <td>2020-10-19</td>
            </tr>
            <tr>
                <td>有一丝</td>
                <td>wh1h@111.com</td>
                <td>2021-10-09</td>
            </tr>
        </tbody>
    </table>
    <!-- 当鼠标移动上去就会有显示 -->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册于</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王花花</td>
                <td>whh@111.com</td>
                <td>2020-10-09</td>
            </tr>
            <tr>
                <td>倪马</td>
                <td>w22hh@111.com</td>
                <td>2020-11-09</td>
            </tr>
            <tr>
                <td>但测</td>
                <td>whh12@111.com</td>
                <td>2020-10-19</td>
            </tr>
            <tr>
                <td>有一丝</td>
                <td>wh1h@111.com</td>
                <td>2021-10-09</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册于</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王花花</td>
                <td>whh@111.com</td>
                <td>2020-10-09</td>
            </tr>
            <tr>
                <td>倪马</td>
                <td>w22hh@111.com</td>
                <td>2020-11-09</td>
            </tr>
            <tr>
                <td>但测</td>
                <td>whh12@111.com</td>
                <td>2020-10-19</td>
            </tr>
            <tr>
                <td>有一丝</td>
                <td>wh1h@111.com</td>
                <td>2021-10-09</td>
            </tr>
        </tbody>
    </table>
    <table class="table">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册于</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>王花花</td>
                <td>whh@111.com</td>
                <td>2020-10-09</td>
            </tr>
            <tr class="danger">
                <td>倪马</td>
                <td>w22hh@111.com</td>
                <td>2020-11-09</td>
            </tr>
            <tr class="warning">
                <td>但测</td>
                <td>whh12@111.com</td>
                <td>2020-10-19</td>
            </tr>
            <tr class="info">
                <td>有一丝</td>
                <td>wh1h@111.com</td>
                <td>2021-10-09</td>
            </tr>
        </tbody>
    </table>
</body>
</html>